<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-20 14:08:37
 * @LastEditTime: 2019-10-30 15:59:35
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <div class="container_card">
      <div class="container_head">
        <svg-icon icon-class="list" />  添加签名
      </div>
      <div class="container_body">
        <el-form
          ref="addform"
          :model="addform"
          :rules="addRules"
          label-width="150px"
          class="demo-dynamic"
        >
          <!-- <el-form-item
            label="签名名称"
            prop="name"
          >
            <el-input
              ref="name"
              v-model="addform.name"
              placeholder="签名名称"
              name="name"
            />
          </el-form-item> -->
          <el-form-item label="签名文件" prop="file">
            <el-upload
              class="upload-demo"
              :action="upload_url"
              :headers="headers"
              :on-remove="handleRemove"
              :on-preview="handlePreview"
              :on-success="handleSuccess"
              :file-list="label_list"
              :limit="uploadLimit"
              :on-change="handleBefore"
              :on-exceed="handleExeed"
            >
              <el-button size="small" type="primary">点击上传签名文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="签名密码"
            prop="password"
          >
            <el-input
              ref="password"
              v-model="addform.password"
              placeholder="签名密码"
              name="password"
              show-password
            />
          </el-form-item>
          <el-form-item
            label="签名别名"
            prop="alias"
          >
            <el-input
              ref="alias"
              v-model="addform.alias"
              placeholder="签名别名"
              name="alias"
            />
          </el-form-item>
          <el-form-item
            label="别名密码"
            prop="alias_password"
          >
            <el-input
              ref="alias_password"
              v-model="addform.alias_password"
              placeholder="别名密码"
              name="alias_password"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button type="btn" @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import config from '../../config/config'
export default {
  data() {
    const iconValidate = (rule, value, callback) => {
      if (this.addform.file === '' || this.addform.file === undefined || this.addform.file === null) {
        callback(new Error('请上传一张游戏图标！'))
      }
      callback()
    }
    return {
      addform: {
        domains: [{
          value: ''
        }]
      },
      addRules: {
        name: [{ required: true, trigger: 'blur', message: '请填写渠道名称' }],
        alias: [{ required: true, trigger: 'blur', message: '请填写游戏简称' }],
        password: [{ required: true, trigger: 'blur', message: '请填写密码' }],
        alias_password: [{ required: true, trigger: 'blur', message: '请填写别名密码' }],
        file: [{ required: true, validator: iconValidate }]
      },
      label_list: [],
      checkboxGroup: [],
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('_token')
      },
      upload_url: config.BASE_URL + 'upload/sign_file',
      uploadLimit: 1,
      img_url: config.BASE_IMG,
      unity_enc_state: false
    }
  },
  mounted() {
    const id = this.$route.query.id
    if (id) {
      const data = {
        id: id
      }
      this.$api.get_game_info(data).then(res => {
        this.addform = res.data
        this.label_list.push({
          'uid': res.data.icon,
          'url': this.img_url + res.data.icon
        })
        this.addform.state = res.data.state.toString()
        this.addform.unity_enc = res.data.unity_enc.toString()
      })
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.addform.file = ''
    },
    handlePreview(res) {
      console.log(res)
    },
    handleSuccess(res, fileList) {
      if (res.access_token) {
        localStorage.setItem('_token', res.access_token)
      }
      console.log(this.label_list)
      this.addform.file = res.path
      this.addform.name = res.name
    },
    handleExeed(res) {
      this.$notify.error({
        title: '错误',
        message: '最多只能上传一个文件！'
      })
    },
    handleBefore(file, fileList) {
      this.headers = {
        'Authorization': 'Bearer ' + localStorage.getItem('_token')
      }
    },
    submitForm() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          this.addform.platform = this.checkboxGroup.join(',')
          this.$api.add_sign(this.addform).then(res => {
            this.$notify.success({
              success: '',
              message: '添加成功！'
            })
            this.resetForm()
            this.$router.push({
              'path': '/games/signs'
            })
          }).catch(() => {
            this.$notify.error({
              title: '',
              message: '网络错误'
            })
          })
        }
      })
    },
    resetForm() {
      this.addform = {
        domains: [{
          value: ''
        }]
      }
      this.label_list = []
      this.checkboxGroup = []
    }
  }
}
</script>
<style scoped lang="">

</style>
